<template>
  <div class="search_warpper">
    <!-- <van-nav-bar fixed left-arrow @click-left="onClickLeft" /> -->
    <div class="search">
      <van-search
        v-model="keyword"
        show-action
        placeholder="试试搜索商品、服务或门店吧"
        @clear="clear"
      >
        <template #action>
          <div @click="onSearch" class="search_btn">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="main">
      <template v-if="!searchFlag">
        <div class="text_1 flex">
          <span>历史搜索</span>
          <van-icon name="delete-o" @click="delAllHistory" />
        </div>
        <div class="address">
          <van-tag
            v-for="(v, i) in searchHistory"
            :key="i"
            @click="historySearch(v)"
            >{{ v }}</van-tag
          >
        </div>
        <!-- <div class="text_1">搜索发现</div>
        <div class="address">
          <van-tag v-for="(v, i) in searchList" :key="i">{{ v }}</van-tag>
        </div> -->
      </template>
      <template v-else>
        <div class="list">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="list.length > 0 ? '没有更多了' : ''"
            :immediate-check="false"
            @load="onLoad"
          >
            <goodsItem
              v-for="(v, i) in list"
              :type="1"
              :key="JSON.stringify(v) + i"
              :item="v"
              @buy="buyNow"
              @click.native="goDetail(v)"
            >
            </goodsItem>
          </van-list>
          <van-empty
            v-if="!loading && list.length == 0"
            image="search"
            description="暂无数据"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import goodsItem from "@/components/goodsItem.vue";
import api from "@/api/api";
import { Dialog } from "vant";
export default {
  components: { goodsItem },
  props: {},
  data() {
    return {
      keyword: "",
      searchList: [
        "发动机舱清洗",
        "前挡玻璃去油膜",
        "轮毂清洗",
        "四轮定位C级以上中大型轿车和SUV",
      ],
      searchHistory: [],
      searchFlag: false,
      list: [],
      loading: false,
      finished: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 15,
      },
    };
  },
  watch: {
    keyword(newVal, oldVal) {
      if (newVal.trim().length == 0) {
        this.searchFlag = false;
      }
    },
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async onSearch() {
      this.list = [];
      this.finished = false;
      this.pageInfo.pageNum = 1;
      this.searchFlag = true;
      this.loading = true;
      this.onLoad();
    },
    async onLoad() {
      if (this.finished) return;
      let res = await api.search({
        keyWords: this.keyword,
        ...this.pageInfo,
      });
      this.loading = false;
      this.list = [...this.list, ...res.data].filter(
        (v) => v.id != "1952191044194463746"
      );
      this.loading = false;
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
      await this.getSearchHistory();
    },
    historySearch(history) {
      this.keyword = history;
      this.onSearch();
    },
    clear() {
      this.searchFlag = false;
      this.list = [];
      this.finished = false;
      this.pageInfo.pageNum = 1;
    },
    async getSearchHistory() {
      this.searchHistory = await api.searchhistory();
    },
    async delAllHistory() {
      Dialog.confirm({
        title: "请确认",
        message: "是否清空搜索记录?",
      })
        .then(async () => {
          await api.delAllSearchHistory();
          this.getSearchHistory();
        })
        .catch(() => {
          Dialog.close();
        });
    },
    goDetail(v) {
      let type = -1;
      if (v.categoryId == "1923197645038747649") {
        //洗车
        type = 0;
      } else if (v.categoryId == "1923192237742030850") {
        //保养
        type = 2;
      } else if (v.categoryId == "1923196720186327042") {
        //轮胎
        type = 1;
      }
      this.$router.push({
        path: "/serveDetail",
        query: {
          type,
          goodsId: v.id,
        },
      });
    },
    async buyNow(item) {
      // this.$router.push({
      //   path: "/makeSure",
      //   query: {
      //     id: item.id,
      //     skuId: item.specs[0].skuId,
      //     num: 1,
      //   },
      // });
      // console.log(item);

      this.goDetail(item);
    },
  },
  created() {},
  mounted() {
    this.getSearchHistory();
  },
};
</script>
<style lang="less" scoped>
.search_warpper {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  // padding: 150px 0 50px 0;
  padding: 50px 0;
  box-sizing: border-box;
  .search {
    margin-top: 60px;
    margin: 60px 50px;
    background: #fff;
    .search_btn {
      padding: 0 40px;
      color: #fff;
      background: #169dff;
      border-radius: 10px;
      height: 100px;
      line-height: 100px;
      font-size: 50px;
    }
    /deep/ .van-search {
      padding: 10px;
    }
    /deep/ .van-search__content {
      background: #fff;
    }
  }
  .main {
    height: calc(100vh - 350px);
    background: #fff;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding: 50px 45px;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .text_1 {
      font-size: 60px;
    }
    .address {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      //   justify-content: space-between;
      padding: 20px;
      /deep/ .van-tag {
        padding: 10px 20px;
        color: #333;
        background: #f8f8f8;
        margin-bottom: 40px;
        margin-right: 40px;
      }
    }
  }

  .list {
    // padding: 0 30px;
  }
}
</style>
